<template>
  <u-popup
    class="padding"
    custom-style="width:90%"
    :safeAreaInsetBottom="true"
    :safeAreaInsetTop="true"
    :mode="popupData.mode"
    :show="showDetail"
    :round="popupData.round"
    :overlay="popupData.overlay"
    :closeable="popupData.closeable"
    :closeOnClickOverlay="popupData.closeOnClickOverlay"
    @close="close"
  >
    <view class="padding">
      <view class="padding-tb margin-top grid col-1">
        <view
          class="flex-col text-df flex-center"
          v-for="(value, key) in info"
          :key="key"
          :class="{ hide: !langMap[key] }"
        >
          <view class="text-df margin-top text-grey">{{ langMap[key] }}</view>
          <view
            class="w100 text-center text-bold"
            @click="showInfoToast(value)"
          >
            {{ value || "--" }}
          </view>
        </view>
      </view>

      <u-button
        class="margin-top"
        size="small"
        plain
        type="error"
        @click="hideComment"
        v-if="info.is_hide !== '1'"
        >隐藏</u-button
      >
      <u-button
        class="margin-top"
        size="small"
        plain
        type="primary"
        @click="stickComment"
        >{{ info.stick ? "取消置顶" : "置顶" }}</u-button
      >
      <u-button
        class="margin-top"
        size="small"
        plain
        type="success"
        @click="replyComment"
        >回复</u-button
      >
    </view>
    <u-modal
      :show="showConfirm"
      title="提示"
      :content="content"
      showCancelButton
      @confirm="confirmFn"
      @cancel="showConfirm = false"
    >
      <u-input
        v-if="!content"
        v-model="input"
        placeholder="请输入内容"
        clearable
      />
    </u-modal>
  </u-popup>
</template>

<script>
const langMap = {
  // account: "",
  // advertiser_id: "",
  // agent_account: "",
  // company_account: "",
  // goods_name: "",
  // goods_thumbnail_url: "",
  // id: "",
  // merchant_id: "",
  // order_create_time: "",
  // order_id: "",
  // order_num: "",
  // order_pay_time: "",
  // order_sn: "",
  // order_status_desc: "状态",
  // pid_account: "",
  // plan_id: "",
  // sale: "",
  // type: "",

  plan_name: "计划名",
  advertiser_name: "户名",
  text: "完整评论",
  goods_name: "商品名称",
  order_status_desc: "订单状态",
  comment_create_time: "评论创建时间",
  aweme_name: "用户名",
};
import { hideComment, replyComment, stickComment } from "@/api";

import { toast } from "@/common/toast.js";
import { mapGetters } from "vuex";
export default {
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
    showDetail: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      langMap,
      showConfirm: false,
      content: "",
      input: "",
      confirmFn: () => {},
      popupData: {
        closeable: true,
        overlay: true,
        mode: "center",
        round: 10,
        closeOnClickOverlay: true,
      },
    };
  },
  computed: {
    ...mapGetters(["isAdmin", "curProStatus"]),
  },
  methods: {
    showInfoToast(v) {
      toast({ title: v });
    },
    close() {
      this.$emit("update:showDetail", false);
    },
    hideComment() {
      const content = "确定要隐藏？";
      const confirmFn = () =>
        hideComment({ channel: this.curProStatus == "pdd" ? 1 :this.curProStatus == "jd" ?4: 3, id: this.info.id }).then(() => {
          this.info.is_hide = "1";
        });
      this.confirm({ content, confirmFn });
    },
    replyComment() {
      const content = "";
      this.input = "";
      const confirmFn = () =>
        replyComment({
          channel: this.isAdmin ? 0 : this.curProStatus == "pdd" ? 1 :this.curProStatus == "jd" ?4: 3,
          id: this.info.id,
          operator: "REPLY",
          reply_text: this.input,
        });
      this.confirm({ content, confirmFn });
    },
    stickComment() {
      const content = "确定要置顶？";
      const confirmFn = () =>
        stickComment({
          channel: this.isAdmin ? 0 : this.curProStatus == "pdd" ? 1 :this.curProStatus == "jd" ?4: 3,
          id: this.info.id,
          stick_type: this.info.stick ? "CANCEL_STICK" : "STICK_ON_TOP",
        }).then(() => {
          this.info.stick = !this.info.stick;
        });
      this.confirm({ content, confirmFn });
    },
    confirm({ content, confirmFn }) {
      this.content = content;
      this.confirmFn = () => {
        confirmFn().then((r) => {
          toast({ title: r?.msg });
          this.showConfirm = false;
        });
      };
      this.showConfirm = true;
    },
    gotoPlan() {
      uni.navigateTo({
        url: `/pages/order/sub/plan?plan_id=${this.info.plan_id}`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  background-image: url("~@/static/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
